<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div#circle{
				width:400px;
				height:400px;
				border:3px solid red;
				border-radius:50%;
				/* 边框阴影 box-shadow 属性 */
				box-shadow: 5px 5px 50px 50px red inset;
			}
			div#triangle{
				width:0;
			/*	border-left:50px solid transparent;
				border-right:50px solid transparent;
			    border-bottom:50px solid black;*/
				/* 两行：倒三角，蓝色，透明度，.3
				 提醒：所有边框：50px solid transparent
				 上边框颜色改成蓝色 0,0,255
				 */
				border:50px solid transparent;
				border-top-color:rgba(0,0,255,.3) ;
				}
				/* outline 边框轮廓  只针对input 元素*/
				input{
					outline:1px solid red;
				}
				/* 实际应用：通配选择器 去掉轮廓
				 *{ outline：0;}
				 */
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>